<!--分数条小组件-->
<!--使用方法，将此组件html代码复制到对应的页面片段内，样式已加入公共样式中，可放心使用-->
<div class="bar-container p-tran">

    <!--指示条-->
    <div class="bar-block">
        <div class="bar-item"></div>
    </div>


    <!--文字情况 ，只需要选择一种-->
    <!--1文字始终居中显示-->
    <div class="bar-text-center flex-h-center">70/100</div>


    <!--2文字显示在各个色块的中央位置，需要使用js别给 left 设置宽度，right不需要，由css设置自动占满剩余部分-->
    <div class="bar-text-mid flex-h-space">
        <div class="left">1666</div>
        <div class="right">1724</div>
    </div>


    <!--3文字显示在各个色块两头 -->
    <div class="bar-text-space flex-h-space">
        <div class="left">2场</div>
        <div class="right">8场</div>
    </div>

</div>